<template>
  <div class="map-page el-relative el-flex el-flex-center el-flex-y-center">
    <CSMapChart :list="listMap" />
    <RatePanel type="accept" :list="list1" />
    <RatePanel type="done" :list="list2" />
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import CSMapChart from './CSMapChart.vue'
import RatePanel from './ratePanel.vue'
import { CockpitApi } from '@/api/cockpit'

@Component({
  name: 'Map',
  components: {
    CSMapChart, // 长沙行政区地图
    RatePanel // 区县业务接件数量排行
  }
})
export default class Map extends Vue {
  private list1: any[] = []
  private list2: any[] = []
  private listMap: any[] = []
  created() {
    this.initList1()
    this.initList2()
    this.initListMap()
  }
  initList1() {
    CockpitApi.countRegionAcceptApi().then(res => {
      this.list1 = res.data || []
    })
  }
  initList2() {
    CockpitApi.countRegionFinishApi().then(res => {
      this.list2 = res.data || []
    })
  }
  initListMap() {
    CockpitApi.countMapDataApi().then(res => {
      this.listMap =
        res.data &&
        res.data.map((q: any) => {
          const { acceptnum, finishnum, ontimerate, szq } = q
          return {
            name: szq,
            value: acceptnum,
            done: finishnum,
            rate: `${ontimerate}%`
          }
        })
    })
  }
}
</script>
<style lang="scss" scoped>
.map-page {
  width: 100%;
  height: 100%;
  // border: 1px solid rgba(255, 255, 255, 0.45);
  background: url('~@/assets/cockpit/subdivision/map_bg.png') center no-repeat;
  background-size: 300%;
}
</style>
